<template>
	<view class="box">
		<ttBar leftIcon="icon-back" titleAlign="left" title="立即提现">
			<template v-slot:rightCnt>			
					<text class="rightText" @tap="toPage" data-url="txList">提现记录</text>							
			</template>
		</ttBar>
		<view class="wdUser">
			<view class="left">
				<text>提现人：{{rname}}</text>
				<text>支付宝：{{rcount}}</text>
			</view>
			<text class="edit1" @tap="toPage" data-url="bindAlipay">修改</text>
		</view>
		<view class="inputBox">
			<text class="title">提现金额</text>
			<view class="inputGroup">
				<text>￥</text>
				<input type="number" v-model="count" />
				<text class="iconfont icon-guanbi2fill" @tap="clearAmt"></text>
				<text class="all" @tap="withAll">全部</text>
			</view>
		</view>
		<button class="queren" @tap="queren">确认提现</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		data() {
			return {
				rname:'',
				rcount:'',
				count:'',
				isclick:true
			};
		},
		methods:{
			getData(){
				this.rname=this.userInfo.aliName?(this.userInfo.aliName[0]+'*'):'';
				this.rcount=this.userInfo.aliAccount?(this.userInfo.aliAccount.toString().substr(0,3)+'******'):'';
			},
			queren(){
				if(this.isclick){
					this.isclick = false
					
					if((!this.userInfo.aliName)||(!this.userInfo.aliAccount)){
						this.toPage({
							url:'bindAlipay'
						})
					}else{
						this.count=this.count.toString().tailCut();
						let reg=/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
						if(!this.count){
							uni.showToast({
								title: '请输入提现金额',
								icon: 'none'
							});
						}else if(!reg.test(this.count)){
							uni.showToast({
								title: '请输入合法的金额',
								icon: 'none'
							});
						}else if(parseFloat(this.count)<0.1){
							uni.showToast({
								title: '提现金额不能小于0.1元',
								icon: 'none'
							});
						}else{
							this.$store.dispatch("apiWithdrawal",{
								userId:this.userInfo.userId,
								amount:parseFloat(this.count)
							}).then(res=>{
								if(res.data.result==1 &&res.data.code==1){
									
									uni.showToast({
										title: '提现成功',
										icon: 'none'
									});
									uni.$emit("tixian")
									setTimeout(()=>{
										this.toPage("txList")
									},1000)
									this.isclick = true;
									
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
									this.isclick = true;
									
								}
							})
						}
					}
				}
			
			},
			withAll(){
				this.count=this.userInfo.amount;
			},
			clearAmt(){
				this.count='';
				this.isclick = true;
				
			}
		},
		onLoad() {
			this.getData()
			uni.$on("getAliInfo",(payload)=>{
				this.rname=payload.aliName[0]+'*';
				this.rcount=payload.aliAccount.toString().substr(0,3)+'******';
			})
		}
	}
</script>

<style lang="less">
	page{
		background: #f6f6f6;
	}
	.box{
		background: #f6f6f6;
		display: flex;
		flex-direction: column;
	}
	.wdUser{
		background-color: #FFFFFF;
		display: flex;
		font-size: 32upx;
		padding: 20upx 50upx;
		border-bottom: 20upx solid #f6f6f6;
		border-top: 20upx solid #f6f6f6;
		align-items: center;
		.edit1{
			color: #f79f21;
			padding: 20upx;
			flex-shrink: 0;
		}
		.left{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			text{
				padding: 10upx;
			}
		}
	}
	.inputBox{
		padding: 38upx 50upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.title{
			font-size: 32upx;
		}
		.inputGroup{
			display: flex;
			align-items: flex-end;
			>text{
				font-size: 40upx;
				border-bottom: 1px solid #f2f2f2;
				padding-bottom: 16upx;
			}
			input{
				height: 80upx;
				line-height: 80upx;
				font-size: 80upx;
				padding-left: 10upx;
				border-bottom: 1px solid #f2f2f2;
			}
			.iconfont{
				// border-bottom: none;
				color: #e8e8e8;
				padding-right: 20upx;
			}
			.all{
				flex-shrink: 0;
				font-size: 32upx;
				color: #f79f21;
				padding: 20upx;
				border-bottom: none;
			}
		}
	}
	.queren{
		margin: 100upx;
		height: 84upx;
		border-radius: 42upx;
		border: none;
		outline: none;
		flex-grow: 1;
		background: linear-gradient(to right,#ff7f2a,#ff5a2a);
		line-height: 84upx;
		color: #FFFFFF;
		font-size: 32upx;
	}
	.rightText{
		color: #8483a4;
		font-size: 28upx;
	}
</style>
